<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>仿京东商城登录</title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            
            .all{
/*                width: 960px;*/
                margin: 0px auto;
            }
            .first{
                width: 960px;
                margin-bottom: 10px;
                margin-top: 10px;
                overflow: hidden;
                margin: 0px auto;
            }
/*
            .clearfix:affer{
                dispaly: table;
                clear: both;
                content: "";
            }
*/
            .logo{
                float: left;
                
            }
            .z1{
                font-size: 20px;
                text-indent: 1.5em;
                color: #666666;
                margin-left: 20px;
                line-height: 60px;
                height: 60px;
            }
            .z2{
                color: #666666;
                font-size: 16px;
                float: left;
            }
            .z3{
                float: right;
            }
            .z3 a{
                font-size: 12px;
                color: #e4393c;
                text-decoration: none;
            }
            .z3 img{
                vertical-align: middle;
            }
            .z3 span{
                padding-left: 5px;
            }
            .nf{
                width: 210px;
                background: white;
                padding: 15px 12px;
                position: relative;
                left: 700px;
                top: 120px;
            }
            
            .second{
                
                overflow: hidden;
                padding-bottom: 10px;
            }
            .third input{
                width: 174px;
                height: 26px;
                float: left;
               
                
            }
            .third img{
                float: left;
                width: 30px;
                
                
            }
            .third{
                margin-top: 8px;
                overflow: hidden;
                margin-bottom: 10px;
                width: 210px;
                height: 30px;
                border: 1px solid #bdbdbd;
                box-sizing: border-box;
            }
            .four input{
                width: 174px;
                height: 26px;
                float: left;
                
                    
               
            }
            .four img{
                float: left;
                width: 30px;
                
                
            }
            .four{
                margin-top: 15px;
                overflow: hidden;
                margin-bottom: 10px;
                width: 210px;
                height: 30px;
                border: 1px solid #bdbdbd;
                box-sizing: border-box;
            }
            .five{
                color: #666666;
                font-size: 12px;
                overflow: hidden;
                margin-top: 15px;
            }
            .five a{
                color: #666666;
                text-decoration: none;
            }
            .five input{
                float: left;
            }
            .five p{
                float: right;
            }
            .six input{
                width: 210px;
                height: 30px;
                background: #e4393c;
                margin-top: 10px;
                border: 0px;
                color: white;
                border-radius: 2px;
            }
            .ban{
                background: url(banner.png) no-repeat;
                width: 960px;
                height: 475px;
                margin: 0 auto;
            }
            li{
                display: inline-block;
                list-style-type: none;
                font-size: 12px;
            }
            li a{
                color: #666666;
                text-decoration: none;
            }
            li a:hover{
                color: cadetblue;
            }
            ul{
                margin-top: 10px;
            }
            .seven p{
                color: #666666;
                font-size: 12px;
                margin-top: 7px;
                
            }
            .seven{
                text-align: center;
/*                margin-bottom: 30px;*/
                    
            }
            .content{
                width: 100%;
                height: 475px;
                background-color: #e93854;
            }
        </style>
    </head>
    <body>
        <div class="all">
            <div class="first clearfix">
                <img src="logo.png" class="logo" />
                <p class="z1">欢迎登录</p>
            </div>
            <div class="content">
            <div class="ban">
               
                <form>
            <div class="nf">
            <div class="second">
                <p class="z2">京东会员</p>
                <p class="z3"><img src="icon5.jpg" /><span><a href="#">立即注册</a></span></p>
            </div>
            <div class="third">
                <label for="sname"><img src="icon1.jpg" class="clearfix" /></label>
                <input type="text" name="sname" maxlength="16" placeholder="邮箱/用户名/已验证手机" id="sname"  />
            </div>
            <div class="four">
                <label for="pass"><img src="icon2.jpg" /></label>
                <input type="password" name="pass" maxlength="16" id="pass" />
            </div>
            <div class="five">
                <input type="checkbox" name="land" value="自动登录">自动登录
                <p><a href="#">忘记密码？</a></p>
            </div>
            <div class="six">
            <input type="submit" name="submit" value="登录" class
            anniu />
            </div>
            </div>
            </form>
            
            </div>
            </div>
           <div class="seven">
               <ul>
                   <li><a href="#"> 关于我们 </a>|</li>
                   <li><a href="#"> 联系我们 </a>|</li>
                   <li><a href="#"> 人才招聘 </a>|</li>
                   <li><a href="#"> 商家入驻 </a>|</li>
                   <li><a href="#"> 广告服务 </a>|</li>
                   <li><a href="#"> 手机京东 </a>|</li>
                   <li><a href="#"> 友情链接 </a>|</li>
                   <li><a href="#"> 销售联盟 </a>|</li>
                   <li><a href="#"> 京东社区 </a>|</li>
                   <li><a href="#"> 京东公益 </a>|</li>
                   <li><a href="#"> English Site </a></li>
               </ul>
               <p>Copyright?2004-2017 京东JD.com 版权所有</p>
           </div> 
        </div>
    </body>
</html>